<template>
  <div class="app-container">
    <div class="container ">
      <el-row :gutter="20" class="filter-container">
        <el-col :span="15">
          <el-button
            v-waves
            :type="listQuery.stateType == 0?'primary':''"
            size="mini"
            @click="getList('wodefaqi')"
          >
            我的发起
          </el-button>
          <el-button
            v-waves
            :type="listQuery.stateType == 1?'primary':''"
            size="mini"
            @click="getList('wodedaiban')"
          >
            我的待办
          </el-button>
          <el-button
            v-waves
            :type="listQuery.stateType == 4?'primary':''"
            size="mini"
            @click="getList('xiaoxitongzhi')"
          >
            消息通知
          </el-button>
        </el-col>
        <el-col :span="9" style="text-align: right;">
          <!-- <el-select
            v-model="listQuery.departId"
            style="width:130px;padding-right:12px"
            placeholder="请选择部门"
            size="mini"
            clearable
            @change="queryDepartC"
          >
            <el-option
              v-for="item in options10"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select> -->
          <el-input
            v-model="listQuery.search"
            style="width:130px;padding-right:12px"
            :placeholder="placeholderName"
            size="mini"
          />
          <el-button size="mini" type="primary" @click="getList">
            搜索
          </el-button>
        </el-col>
        <!-- <el-col :span="4" style="text-align: right;">
          <el-select
            v-model="listQuery.departId"
            placeholder="请选择部门"
            size="mini"
            clearable
            @change="queryDepartC"
          >
            <el-option
              v-for="item in options10"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-col>
        <el-col :span="4">
          <el-input
            v-model="listQuery.search"
            placeholder="请输入用户名"
            size="mini"
          >
            <i slot="suffix" class="el-input__icon el-icon-search" @click="getList" />
          </el-input>
        </el-col> -->
      </el-row>
      <el-table
        v-loading="listLoading"
        element-loading-text="正在加载中..."
        element-loading-background="rgba(0, 0, 0, 0.5)"
        :data="list"
        border
        size="mini"
        fit
        highlight-current-row
      >
        <el-table-column
          align="center"
          :label="listQuery.stateType !== 4?'用户名':'执行人'"
          width="120"
        >
          <template
            slot-scope="scope"
          >
            <span :title="scope.row.userPhone">{{ scope.row.userName }}</span>
          </template>
        </el-table-column>
        <!-- <el-table-column align="center" label="手机号" width="">
          <template slot-scope="scope">
            {{ scope.row.userPhone }}
          </template>
        </el-table-column> -->
        <el-table-column label="事件描述" width="" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.content }}</span>
          </template>
        </el-table-column>
        <el-table-column
          v-if="listQuery.stateType !== 1 && listQuery.stateType !== 4"
          label="处理结果"
          width="110"
          align="center"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.stateDesc }}</span>
          </template>
        </el-table-column>
        <el-table-column
          v-if="listQuery.stateType == 1"
          label="处理状态"
          width="110"
          align="center"
          :filters="[{ text: '未处理', value: '0' }, { text: '已同意', value: '1' },{ text: '已拒绝', value: '2' },{ text: '已撤回', value: '3' }]"
          :filter-method="filterTag"
          filter-placement="bottom-end"
        >
          <template slot-scope="scope">
            <el-tag
              :type="scope.row.state == 1 ? 'success' : scope.row.state == 2 ? 'danger':'info'"
              disable-transitions
            >{{ scope.row.state == 0? '未处理' :scope.row.state == 1?
              '已同意' : scope.row.state == 2?
                '已拒绝' : '已撤回' }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="日期" align="center">
          <template slot-scope="scope">
            {{ scope.row.createTime }}
          </template>
        </el-table-column>
        <el-table-column
          v-if="isManage"
          label="功能操作"
          align="left"
          width="300"
          fixed="right"
        >
          <template slot-scope="scope">
            <el-button
              style="width: 80px;"
              v-if="scope.row.type > 4 && listQuery.stateType !== 4&& scope.row.type !== 9"
              type="primary"
              size="mini"
              plain
              @click="handleEdit('yulan', scope.row)"
            >预览</el-button>
            <el-button
              style="width: 80px;"
              v-if="scope.row.type > 4 && listQuery.stateType !== 4&& scope.row.type == 9"
              type="primary"
              size="mini"
              plain
              @click="handleEdit('detail', scope.row)"
            >详情</el-button>
            <el-button
              style="width: 80px;"
              v-if="scope.row.type < 4 && scope.row.state == 0 && listQuery.stateType == 1"
              type="primary"
              size="mini"
              @click="handleEdit('agree', scope.row)"
            >{{ scope.row.type == 2 ?'重置':'授权' }}</el-button>
            <el-button
              style="width: 80px;"
              v-if="scope.row.type > 4 && scope.row.state == 0 && listQuery.stateType == 1"
              type="primary"
              size="mini"
              @click="handleEdit('agree', scope.row)"
            >同意</el-button>
            <el-button
              style="width: 80px;"
              v-if="scope.row.state == 0 &&listQuery.stateType == 1"
              type="danger"
              size="mini"
              @click="handleEdit('del', scope.row)"
            >拒绝</el-button>
            <el-button
              style="width: 80px;"
              v-if="scope.row.state == 0 && listQuery.stateType == 0"
              type="warning"
              size="mini"
              @click="handleEdit('chehui', scope.row)"
            >撤回</el-button>
            <el-button
              style="width: 80px;"
              v-if="listQuery.stateType == 4 && scope.row.type == 4 && scope.row.state == 0"
              type="primary"
              size="mini"
              @click="handleEdit('agree', scope.row)"
            >确定</el-button>
            <el-button
              style="width: 80px;"
              v-if="listQuery.stateType == 4 && scope.row.type == 4 && scope.row.state != 0"
              type="success"
              size="mini"
            >已读</el-button>
            <el-button
              style="width: 80px;"
              v-if="listQuery.stateType == 4 && scope.row.type == 4"
              type="danger"
              size="mini"
              @click="handleEdit('messageDel', scope.row)"
            >删除</el-button>
            <!-- <el-button
              v-if="scope.row.type == 4"
              :disabled="true"
              type="info"
              size="mini"
            >已禁用</el-button> -->
          </template>
        </el-table-column>
      </el-table>
      <pagination :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
    </div>

  </div>
</template>

<script>
import { softDetailSoft, softSecretUsePage, softSecretUseAgree, softSecretUseRecycle } from '@/api/softManage'
import { messagePage, handler } from '@/api/message'
import Pagination from '@/components/Pagination'
import { getCookie, setCookie, removeCookie } from '@/utils/cookie'
import { mapGetters } from 'vuex'
import {
  departmentList
} from '@/api/department'
export default {
  computed: {
    ...mapGetters([
      'name',
      'userInfo'
    ]),
    isManage() {
      if (getCookie('userInfo')) {
        return JSON.parse(getCookie('userInfo')).roleType === 1024 || 1025
      } else {
        return this.userInfo.roleType === 1024 || 1025
      }
    }
  },
  components: { Pagination },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      value1: '',
      value2: '',
      total: 10,
      list: [],
      listLoading: false,
      listQuery: {
        departId: '',
        limit: 10,
        page: 1,
        search: '',
        state: null,
        stateType: 0,
        type: 0
      },
      options: [{
        value: '1',
        label: '全部软件'
      }, {
        value: '2',
        label: '办公软件'
      }],
      options10: [],
      value: '1',
      placeholderName: '全部'
    }
  },
  created() {
    this.fetchData()
    this.getDepartmentList()
  },
  methods: {
    getDepartmentList() {
      departmentList({
        limit: 50,
        page: 1
      }).then(res => {
        if (res.code === 200) {
          this.options10 = []
          res.data.data.map(item => {
            if (item.id !== '1025' && item.id !== '55904214559285248') {
              this.options10.push(item)
            }
          })
        }
      })
    },
    queryDepartC(val) {
      if (val) {
        this.placeholderName = '全部'
      } else {
        this.placeholderName = '全部'
      }
      // this.getList()
    },
    filterTag(value, row) {
      return row.state == value
    },
    handleEdit(index, row) {
      if (index == 'yulan') {
        window.open('http://10.10.10.11:9007/onlinePreview?url=' + window.encodeURIComponent(row.remark))
      } else if (index === 'detail') {
        console.log(row.remark)
        const data={id:row.remark}
        softDetailSoft(data).then(response => {
          console.log('response id:', response)
          this.$router.push({ path: '/dashboard/softwareLibraryDetails',
            query: {
              software: response.data,
              type: 'applyManage'
            }})
        })
      }
      else if (index === 'del') {
        handler({
          id: row.id,
          state: 2
        }).then(res => {
          if (res.code === 200) {
            this.$message.success('操作成功')
            this.getList()
          }
        }).catch(() => {
          this.getList()
        })
      } else if (index == 'chehui') {
        handler({
          id: row.id,
          state: 3
        }).then(res => {
          if (res.code === 200) {
            this.$message.success('撤回成功')
            this.getList()
          }
        }).catch(() => {
          this.getList()
        })
      } else if (index == 'messageDel') {
        handler({
          id: row.id,
          state: 4
        }).then(res => {
          if (res.code === 200) {
            // this.$message.success('操作成功')
            this.getList()
          }
        }).catch(() => {
          this.getList()
        })
      } else {
        handler({
          id: row.id,
          state: 1
        }).then(res => {
          if (res.code === 200) {
            // this.$message.success('操作成功')
            this.getList()
          }
        }).catch(() => {
          this.getList()
        })
      }
    },
    handleDelete(index, row) {
    },
    getList(params) {
      this.list = []
      if (params == 'wodefaqi') {
        this.listQuery.stateType = 0
        this.listQuery.type = 0
      } else if (params == 'wodedaiban') {
        this.listQuery.stateType = 1
        this.listQuery.type = 1
      } else if (params == 'xiaoxitongzhi') {
        this.listQuery.stateType = 4
        this.listQuery.type = 4
      }
      this.listLoading = true
      messagePage(this.listQuery).then(response => {
        this.list = response.data.data
        this.total = response.totalCount
        this.listLoading = false
      })
    },
    fetchData() {
      this.getList()
    }
  }
}
</script>

<style scoped>
  .margin-left20 {
    margin-left: 20px;
  }
  .text-left {
    text-align: left;
  }
  .text-right {
    text-align: right;
    padding-right: 20px ;
  }
  .filter-container{
    margin: 20px;
  }
</style>
